<template>
    <div class="home">
      <Header />
      <!-- 注意这里的content的样式，可以让content占满整个屏幕的左边 -->
      <el-container class="content">
        <Menu />
        <el-container>
          <el-main>
            <Bread />
            <div class="cont">
              <router-view></router-view>
            </div>
          </el-main>
          <el-footer><Footer /></el-footer>
        </el-container>
      </el-container>
    </div>
</template>

<script>
import Header from '@/components/common/Header.vue';
import Footer from '@/components/common/Footer.vue';
import Menu from '@/components/common/Menu.vue';
import Bread from '@/components/common/Breadcrumb.vue';

export default {
    components: {
        Header,
        Footer,
        Menu,
        Bread
    },

    created() {
        // console.log("this.$router.options.routes in home======>", this.$router.options.routes)
    }
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  .content {
    position: absolute;
    width: 100%;
    // 这里的60px正好是header的行高，也是60px
    top: 60px;
    // 距离下面的屏幕的距离，设置成0
    bottom: 0;
    .cont {
      margin: 20px 0;
    }
  }
}
</style>

